<template>
  <div class="body">
    <my-header-5></my-header-5>
    <div class="c1">
      <div class="c2">
        <img
          src="https://img0.baidu.com/it/u=3912775299,2502767394&fm=253&fmt=auto&app=138&f=PNG?w=500&h=515"
          alt=""
        />
      </div>
    </div>
    <div class="line"></div>
    <div class="me-title">我的订单</div>
    <div class="me-li">
      <div class="li-1">
        <span><i class="iconfont icon-dianying"></i></span>
        <span>电影</span>
      </div>
      <div class="li-2">
        <span><i class="iconfont icon-bag"></i></span>
        <span>商城</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="me-foot">
      <van-cell class="f1" title="优惠卷" is-link />
      <van-cell class="f1" title="折扣卡" is-link />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
//引入头部的组件
import MyHeader5 from "../components/MyHeader5.vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Me",
  //注册
  components: {
    MyHeader5,
  },
};
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100vh;
  background-color: #eee;
}
.c1 {
  width: 100%;
  height: 4rem;
  background: #e54847;
  display: flex;
  align-items: center;
  justify-items: center;
}
.c2 {
  width: 2.1333rem;
  height: 2.1333rem;
  border-radius: 50%;
  background: #f8f8f8;
  margin: auto;
  img {
    width: 2.1333rem;
    height: 2.1333rem;
    border-radius: 50%;
    object-fit: cover;
  }
}
.me-title {
  line-height: 0.2667rem;
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
  background-color: #f8f8f8;
  font-size: 16px;
  color: #555;
}
.line {
  background: #eee;
  height: 10px;
}
.me-li {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-around;
  background-color: #f8f8f8;
  width: 100%;
  height: 2.1333rem;
  .li-1 {
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5333rem;
    line-height: 0.8rem;
    color: #333;
    font-size: 0.3733rem;
    span:nth-child(1) {
      width: 1.3333rem;
      height: 1.3333rem;
      background-color: #e54847;
      border-radius: 1.3333rem;
      i {
        display: block;
        width: 1.0667rem;
        height: 1.0667rem;
        border-radius: 50%;
        font-size: 25px;
        margin: auto;
        margin-top: 0.2667rem;
        color: #fff;
      }
    }
  }
  .li-2 {
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5333rem;
    line-height: 0.8rem;
    color: #333;
    font-size: 0.3733rem;
    span:nth-child(1) {
      width: 1.3333rem;
      height: 1.3333rem;
      border-radius: 1.3333rem;
      background-color: #40d6c2;

      i {
        display: block;
        width: 1.0667rem;
        height: 1.0667rem;
        border-radius: 50%;
        font-size: 20px;
        margin: auto;
        margin-top: 0.2667rem;
        color: #fff;
      }
    }
  }
}
.me-foot {
  width: 100%;
  height: 6.4rem;
  background-color: #eee;
  .f1 {
    background-color: #f8f8f8;
    color: #555;
  }
}
</style>